// 预览对话框组件
<template>
  <div class="previewDialog">
    <!-- 提示框 -->
    <div class="tips">
      <i class="el-icon-info"></i>
      <span>数据一共 {{ counts }} 条</span>
    </div>
    <!-- 表格 -->
    <div class="table">
      <template>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background:'#FAFAFA',color:'#919398',borderBottom: '2px solid #E8E8E8'}">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="100">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="100">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="100">
          <template #default="{ row }">
            {{ questionType[row.questionType] }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="300" >
          <template #default="{ row }">
            {{ clearHtmlTag(row.question) }}
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template #default="{ row }">
            {{ dateFormat(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="100">
            <template #default="{ row }">
            {{ difficulty[row.difficulty] }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100">
        </el-table-column >
        <el-table-column prop="chkState" label="审核状态" width="100">
          <template #default="{ row }">
            {{ chkState[row.chkState] }}
          </template>
        </el-table-column >
        <el-table-column prop="chkRemarks" label="审核意见" width="100">
        </el-table-column >
        <el-table-column prop="chkUser" label="审核人" width="100">
        </el-table-column >
        <el-table-column prop="chkState" label="发布状态" width="100">
          <template #default="{ row }">
            {{ publishState[row.publishState]}}
          </template>
        </el-table-column >
        <el-table-column label="操作" width="200" fixed="right" >
          <template #default="{ row }">
            <el-button type="text" size="small" @click="previewDialog(row.id)">预览</el-button>
            <el-button type="text" size="small" @click="auditDialog(row)" :disabled="row.chkState === 0 ? false : true">审核</el-button>
            <el-button type="text" size="small" :disabled="row.publishState === 1 ? true : false" @click="$router.push('/questions/new')">修改</el-button>
            <el-button type="text" size="small" @click="clickChoicePublish(row)">{{ row.publishState === 0 ? '上架' : '下架' }}</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    </div>
     <!-- 分页器 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      :hide-on-single-page="value"
      @current-change="handleCurrentChange"
      :current-page="choiceData.page"
      :page-size="choiceData.pagesize"
      layout=" prev, pager, next, sizes, jumper"
      :total="counts"
      :page-sizes="[5, 10, 20, 50]"
      >
    </el-pagination>
    <!-- 预览弹出框 -->
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="60%"
      @close="clisepreviewDialog"
      >
        <!-- 弹出框内容 -->
        <el-descriptions :column="4">
            <el-descriptions-item label="【题型】">{{ questionType[descriptionsData.questionType] }}</el-descriptions-item>
            <el-descriptions-item label="【编号】">{{ descriptionsData.id }}</el-descriptions-item>
            <el-descriptions-item label="【难度】">{{ difficulty[descriptionsData.difficulty] }}</el-descriptions-item>
            <el-descriptions-item label="【标签】">{{ descriptionsData.tags }}</el-descriptions-item>
            <el-descriptions-item label="【学科】">{{ descriptionsData.subjectName }}</el-descriptions-item>
            <el-descriptions-item label="【目录】">{{ descriptionsData.directoryName }}</el-descriptions-item>
            <el-descriptions-item label="【方向】">{{ descriptionsData.direction }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions direction="vertical" >
            <el-descriptions-item label="【题干】" :contentStyle="{ color:'#1C1DF6' }">{{ clearHtmlTag(descriptionsData.question) }}
              <template>
                <p style="color: #606266">{{ questionType[descriptionsData.questionType] }} 选项:（以下选中的选项为正确答案）</p>
                <!-- 单选框显示的内容 -->
                <template v-if="descriptionsData.questionType === '1'">
                  <el-radio v-model="radio" v-for="item in optionsData" :key="item.id" :label="item.code" style="display:block; margin-top:15px">{{ item.title }}</el-radio>
                </template>
                <!-- 多选框显示的内容 -->
                <template v-else-if="descriptionsData.questionType === '2'">
                  <el-checkbox-group v-model="checkList" >
                    <el-checkbox v-for="item in optionsData" :key="item.id" :label="item.code" style="display:block; margin-top:15px">{{ item.title }}</el-checkbox>
                    <!-- <el-checkbox :label="item.option.code" style="display:block; margin-bottom: 10px"></el-checkbox> -->
                  </el-checkbox-group>
                </template>
              </template>
            </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <template >
        <el-descriptions>
            <el-descriptions-item label="【参考答案】">
              <span>
              <el-button type="danger" size="small" @click="video = !video">视频答案预览</el-button>
              </span>
            </el-descriptions-item>
        </el-descriptions>
        <div >
          <video v-bind:src="descriptionsData.videoURL" controls="controls" class="videoBox" v-if="video"></video>
        </div>
        </template>
        <el-divider></el-divider>
        <el-descriptions >
            <el-descriptions-item label="【答案解析】">{{ clearHtmlTag(descriptionsData.answer) }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions :column="4">
            <el-descriptions-item label="【题目备注】">{{ descriptionsData.remarks }}</el-descriptions-item>
        </el-descriptions>
        <div class="dialogFoot">
          <el-button type="primary" @click="clisepreviewDialog" class="dialogButton">关闭</el-button>
        </div>
    </el-dialog>
    <!-- 审核弹出框 -->
    <el-dialog
      title="题目审核"
      :visible="auditDialogVisible"
      width="30%"
      @close="closeDialogVisible"
      >
      <el-form ref="auditDialogRef" :v-model="auditDialogForm">
        <el-form-item >
          <el-radio-group v-model="auditDialogForm.chkState">
            <!-- <el-radio v-model="radio" label="1">备选项</el-radio> -->
            <el-radio :label="1">同意</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item >
          <el-input type="textarea" v-model="auditDialogForm.chkRemarks" placeholder="请输入审核意见"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFoot">
        <el-button @click="closeDialogVisible" class="dialogButton1">取 消</el-button>
        <el-button type="primary" @click="submitDialogVisible" class="dialogButton">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 精选题库列表 / 题库详情 / 试题审核 /精选题库上下架
import { choice, choiceDetail, choiceCheck } from '@/api/hmmm/questions.js'
// 引入dayjs
import dayjs from 'dayjs'
export default {
  name: 'previewDialog',
  data () {
    return {
      // 表格接口
      choiceData: {
        page: 1,
        pagesize: 5
      },
      counts: 0,
      // 表格数据
      tableData: [],
      // 利用枚举来判断题型
      questionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 利用枚举来判断难度
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 利用枚举来判断审核状态
      chkState: {
        0: '待审核',
        1: '已审核',
        2: '已拒绝'
      },
      publishState: {
        0: '已下架',
        1: '已发布',
        2: '待发布'
      },
      // 预览对话框
      dialogVisible: false,
      // 描述列表数据
      descriptionsData: {},
      // 题干多选框
      checkList: [],
      // 题干options数据
      optionsData: [],
      // 单选框
      radio: '2',
      // 分页器
      // 当只有一页时隐藏分页
      value: false,
      // 视频解析
      video: false,
      // 审核弹出框
      auditDialogVisible: false,
      // 审核框表单
      auditDialogForm: {
        chkState: 1,
        chkRemarks: ''
      },
      // 试题审核接口数据
      choiceCheckData: {}
    }
  },
  created () {
    this.applyChoice()
  },
  methods: {
    // 渲染精选题库列表
    async applyChoice () {
      const res = await choice(this.choiceData)
      console.log('1', res)
      // 列表
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    // 表格渲染-格式
    // 时间标准化
    dateFormat (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 替换题干中的标签
    clearHtmlTag (str) {
      // console.log(str)
      if (str) {
        return str.replace(/<[^>]+>/g, '')
      }
    },
    // 预览对话框
    async previewDialog (id) {
      this.dialogVisible = true
      const res = await choiceDetail(id)
      console.log('2', res)
      // 表格数据赋值
      this.descriptionsData = res.data
      // 选择框数据
      this.optionsData = res.data.options
      console.log('选择框数据', this.optionsData)
      // 遍历数组--添加到多选框选中
      this.optionsData.forEach(item => {
        if (item.isRight === 1) {
          console.log(item)
          // 多选框
          this.checkList.push(item.code)
          // 单选框
          this.radio = item.code
        }
      })
    },
    // 关闭预览对话框
    clisepreviewDialog () {
      // console.log(111)
      this.dialogVisible = false
    },
    // 分页器
    handleCurrentChange (val) {
      console.log(val)
      this.choiceData.page = val
      // 渲染精选题库列表
      this.applyChoice()
    },
    handleSizeChange (val) {
      console.log('每页多少条', val)
      this.choiceData.pagesize = val
    },
    // 审核对话框
    auditDialog (row) {
      this.auditDialogVisible = true
      this.choiceCheckData = row
    },
    // 关闭审核对话框
    closeDialogVisible () {
      this.auditDialogVisible = false
      // 清空表单
      this.$refs.auditDialogRef.resetFields()
    },
    // 提交审核
    async submitDialogVisible () {
      const res = await choiceCheck({
        ...this.auditDialogForm,
        id: this.choiceCheckData.id
      })
      console.log('审核接口', res)
      // 提示
      this.$message.success('审核成功')
      // 从新渲染页面
      this.applyChoice()
      // 关闭页面
      this.closeDialogVisible()
    },
    // 上下架
    async clickChoicePublish (row) {
      // const res = await choicePublish({ row })
      console.log('上下架', row.publishState)
    }
  }
}
</script>

<style  scoped lang="scss">
.dialogFoot {
  margin-top: 40px;
}
.dialogButton {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.dialogButton1 {
  position: absolute;
  bottom: 20px;
  right: 110px;
}
// 分页器
.el-pagination {
  margin: 20px 0;
  float: right;
}
// 提示框
.tips {
  background-color: #f6f4f4;
  height: 40px;
  width: 100%;
  padding-left: 20px;
  margin: 10px 0;
  border-radius: 6px;
  i {
    float: left;
    color: #83858b;
    line-height: 40px;
     font-size: 14px;
  }
  span {
    line-height: 40px;
    margin-left: 10px;
    font-size: 12px;
    color: #83858b;

  }
}
.videoBox {
  width: 400px;
  height: 300px;
}
</style>
